<template>
    <div>
        <el-card>
            <!--提示区域-->
            <el-alert title="添加商品信息" type="info" center show-icon :closable="false"></el-alert>
            <!--步骤条区域-->
            <el-steps :space="200" align-center :active="activeIndex -0" finish-status="success">
                <el-step title="基本信息"></el-step>
                <el-step title="商品分类"></el-step>
                <el-step title="商品图片"></el-step>
                <el-step title="商品内容"></el-step>
                <el-step title="完成"></el-step>
            </el-steps>
            <!--tab栏区域-->
            <el-form :model="goodForm" :rules="rules" ref="goodFormRef"
                     label-width="100px" label-position="top">
            <el-tabs v-model="activeIndex" :tab-position="'left'">
                <el-tab-pane label="基本信息" name="0">
                    <el-form-item label="商品名称" prop="name">
                        <el-input v-model="goodForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="商品价格" prop="price">
                        <el-input v-model="goodForm.price" type="number"></el-input>
                    </el-form-item>
                    <el-form-item label="商品折扣价" prop="nowPrice">
                        <el-input v-model="goodForm.nowPrice"></el-input>
                    </el-form-item>
                    <el-form-item label="商品数量" prop="num">
                        <el-input v-model="goodForm.num"></el-input>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="商品分类" name="1">
                    <el-form-item label="商品分类" prop="typeId">
                        <el-select v-model="goodForm.typeId" placeholder="请选择">
                            <el-option
                                    v-for="item in typeList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="商品图片" name="2">
                    <el-upload action="http://localhost:8081/admin/file/upload"
                        :headers="header" name="image"
                               :on-remove="handleRemove"
                               :on-success="handle_success"
                               :limit="1"
                               :on-exceed="handleExceed"
                               :on-preview="handlePreview"
                               :file-list="fileList"
                                list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-tab-pane>
                <el-tab-pane label="商品内容" name="3">
                    <el-form-item label="商品内容" prop="introduce">
                        <el-input type="textarea" v-model="goodForm.introduce"></el-input>
                    </el-form-item>
                    <el-button type="primary" @click="add" style="margin-top: 10px">添加商品</el-button>
                </el-tab-pane>
            </el-tabs>
            </el-form>
        </el-card>

        <el-dialog title="图片预览" width="50%"
         :visible.sync="dialogVisible">
            <img :src="goodForm.imageUrl" class="previewImage" alt="">
        </el-dialog>
    </div>
</template>

<script>
    import {type_all} from "../../network/type";
    import {file_delete, goods_submit} from "../../network/goods";

    export default {
        name: "Add",
        data(){
            return{
                activeIndex: '0',
                dialogVisible:false,
                typeList:[],
                goodForm:{
                    name:'',
                    price: 0,
                    nowPrice:0,
                    num:0,
                    typeId: '',
                    imageUrl:'',
                    introduce:''
                },
                header:{Authorization:window.sessionStorage.getItem('token')},
                fileList:[],
                rules:{
                    name:[{required: true,message:'请输入商品名称',trigger:'blur'}],
                    price:[{required: true,message:'请输入商品价格',trigger:'blur'}],
                    nowPrice:[{required: true,message:'请输入商品折扣价',trigger:'blur'}],
                    num:[{required: true,message:'请输入商品数量',trigger:'blur'}],
                    typeId:[{required: true,message:'请选择商品类型',trigger:'blur'}],
                    introduce:[{required: true,message:'请输入商品内容',trigger:'blur'}],
                }
            }
        },
        created() {
            this.getTypeAll()
        },
        methods:{
            getTypeAll(){
                type_all().then(res=>{
                    this.typeList=res.data.map(item=>{
                        return {
                            value:item.id,
                            label:item.typeName
                        }
                    })
                    console.log(res);
                })
            },
            handleRemove(file, fileList) {
                file_delete(this.goodForm.imageUrl).then(res=>{
                    console.log(res);
                })
                this.goodForm.imageUrl=null
                console.log(file, fileList);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            handle_success(res){
                this.goodForm.imageUrl=res.url
                this.$message.success("上传成功！");
            },
            add(){
                this.$refs.goodFormRef.validate(valid=>{
                    if (!valid){
                        return this.$message.error("请填写必要的表单项！")
                    }else {
                      goods_submit(this.goodForm).then(res=>{
                          console.log(res);
                          if (res.code==200){
                              this.$message.success("商品添加成功！");
                              this.$router.push("/good")
                          }else {
                              this.$message.error("商品添加失败!");
                          }
                      })
                    }
                })
            },
            handlePreview(){
                this.dialogVisible=true
            }
        }
    }
</script>

<style scoped>
    .el-step{
        margin: 15px 0;
    }
    .previewImage{
        width: 100%;
    }
</style>